<template>
  <div class="question">
    <div class="topdad">
      <el-card class="top">
        <!-- 第一行 -->
        <el-form ref="form" label-width="80px" :model="form">
          <el-row>
            <el-col :span="5">
              <el-form-item label="学科" prop="subject">
                <el-select
                  v-model="form.subject"
                  placeholder="请选择"
                ><el-option
                  v-for="(item, index) in subjectList"
                  :key="index"
                  :label="item.short_name"
                  :value="item.id"
                /></el-select></el-form-item></el-col>
            <el-col :span="5">
              <el-form-item label="阶段" prop="step">
                <el-select
                  v-model="form.step"
                  placeholder="请选择"
                ><el-option
                  v-for="(item, key, index) in stepObj"
                  :key="index"
                  :label="item"
                  :value="+key"
                /></el-select></el-form-item></el-col>
            <el-col :span="5">
              <el-form-item label="企业" prop="enterprise">
                <el-select
                  v-model="form.enterprise"
                  placeholder="请选择"
                ><el-option
                  v-for="(item, index) in enterpriseList"
                  :key="index"
                  :label="item.short_name"
                  :value="item.id"
                /></el-select></el-form-item></el-col>
            <el-col :span="5">
              <el-form-item label="题型" prop="type">
                <el-select
                  v-model="form.type"
                  placeholder="请选择"
                ><el-option
                  v-for="(index, item) in typeObj"
                  :key="index"
                  :value="typeObj[item]"
                /></el-select></el-form-item></el-col>
            <el-col :span="4" />
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="5">
              <el-form-item label="难度" prop="difficulty">
                <el-select
                  v-model="form.difficulty"
                  placeholder="请选择"
                ><el-option
                  v-for="(index, item) in diffObj"
                  :key="index"
                  :value="diffObj[item]"
                /></el-select></el-form-item></el-col>
            <el-col :span="5">
              <el-form-item prop="username" label="作者">
                <el-input v-model="form.username" /> </el-form-item></el-col>
            <el-col :span="5">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择"
                ><el-option
                  v-for="(index, item) in statusObj"
                  :key="index"
                  :value="statusObj[item]"
                /></el-select></el-form-item></el-col>
            <el-col :span="5">
              <el-form-item label="日期" prop="create_date">
                <el-date-picker
                  v-model="form.create_date"
                  type="date"
                  placeholder="选择日期"
                /></el-form-item>
            </el-col>
            <el-col :span="4" />
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="10">
              <el-form-item label="标题">
                <el-input v-model="form.title" /> </el-form-item></el-col>
            <el-col :span="14">
              <el-button
                type="primary"
                class="searchBtn"
                @click="searchEvent"
              >搜索</el-button>
              <el-button @click="cleanEvent">清除</el-button>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="addEvent"
              >新增加试题</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!-- 题库列表 -->
    <el-card>
      <el-table border style="width: 100%" :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            {{ page.size * (page.currentPage - 1) + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="题目" prop="title">
          <template v-slot="scope">
            <div v-html="scope.row.title" />
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段" prop="subject">
          <template v-slot="scope">
            <div>
              {{ scope.row.subject_name }}.{{ stepObj[scope.row.step] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="题型" prop="type">
          <template v-slot="{ row }">
            <div>
              {{ typeObj[row.type] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业" prop="enterprise_name" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="状态" prop="status">
          <template v-slot="{ row }">
            <div :class="{ red: row.status === 0 }">
              {{ statusObj[row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="访问量" prop="reads" />
        <el-table-column v-slot="{ row }" label="操作">
          <el-button type="text" @click="editEvent(row)">编辑</el-button>
          <el-button type="text" @click="enableEvent(row.id)">{{
            !row.status ? '启用' : '禁用'
          }}</el-button>
          <el-button type="text" @click="del(row.id)">删除</el-button>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          layout="total,sizes,prev,pager,next,jumper"
          :total="page.total"
          :page-size="page.size"
          :page-sizes="page.sizes"
          :current-page="page.currentpage"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <Add
      ref="add"
      :is-show.sync="isShow"
      :subject-list.sync="subjectList"
      :enterprise-list.sync="enterpriseList"
      :diff-obj.sync="diffObj"
      :type-obj.sync="typeObj"
      :step-obj.sync="stepObj"
      @getDate="getDate"
    />
  </div>
</template>

<script>
import Add from './components/questionAdd.vue'
import {
  questionList,
  enterpriseList,
  questionStatus,
  questionRemove
} from '@/api/questions.js'
import { subjectList } from '@/api/subject'
export default {
  components: { Add },
  data() {
    return {
      subjectList: [],
      enterpriseList: [],
      list: [],
      isShow: false,
      form: {
        title: '', // 否	string	标题名称
        subject: '', // 否	int	学科id
        enterprise: '', // 否	int	企业id
        type: '', // 否	int	题目类型:1(单选),2(多选),3(简答)
        step: '', // 否	string	题目阶段:1(初级),2(中级),3(高级)
        username: '', // 否	string	作者
        status: '', // 否	int	状态:0(禁用),1(启用)
        difficulty: '', // 否	int	题目难度: 1(简单),2(一般),3(困难)
        create_date: '', // 否	string	创建日期
        page: '', // 否	string	页码 默认为1
        limit: '' // 否	string	页尺寸 默认为10
      },
      stepObj: {
        1: '初级',
        2: '中级',
        3: '高级'
      },
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      diffObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      statusObj: {
        0: '禁用',
        1: '启用'
      },
      page: {
        total: 10,
        size: 5,
        currentPage: 1,
        sizes: [1, 5, 10, 20, 50]
      },
      value: ''
    }
  },
  created() {
    // 学科列表
    subjectList({ limit: 1000 }).then((res) => {
      console.log(res)
      this.subjectList = res.data.data.items
    })
    // 企业列表
    enterpriseList({ limit: 1000 }).then((res) => {
      this.enterpriseList = res.data.data.items
    })
    this.getDate()
  },
  methods: {
    // 新增题库测试
    addEvent() {
      this.$refs.add.meta = 'add'
      this.isShow = true
    },
    // 获取题库数据
    async getDate() {
      const res = await questionList({
        page: this.page.currentPage,
        limit: this.page.size
      })
      this.list = res.data.data.items
      console.log('res', res)
      console.log(res.data.data.items)
      this.page.total = res.data.data.pagination.total
    },
    // 搜索按钮
    async searchEvent() {
      const res = await questionList({
        page: this.currentPage,
        limit: this.page.size,
        ...this.form
      })
      this.list = res.data.data.items
      this.page.total = res.data.data.pagination.total
    },
    // 启用按钮
    enableEvent(id) {
      questionStatus({ id: id }).then(() => {
        this.$message.success('修改成功')
        this.getDate()
      })
    },
    // 编辑按钮
    async editEvent(row) {
      this.$refs.add.meta = 'edit'
      this.isShow = true
      row.multiple_select_answer = row.multiple_select_answer.split(',')
      row.city = row.city.split(',')
      console.log('img', row)
      if (row.select_options.length == 0) {
        row.select_options.push(
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        )
      }
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 删除题目
    del(id) {
      this.$confirm('确定要删除吗?', '提示').then(() => {
        questionRemove({ id })
        this.getDate()
      })
    },
    // 清除表单
    cleanEvent() {
      this.$refs.form.resetFields()
      this.getDate()
    },
    // 更改页码
    pageChange(page) {
      this.page.currentPage = page
      this.getDate()
    },
    // 更改页容量
    sizeChange(size) {
      this.page.size = size
      this.page.currentPage = 1
      this.getDate()
    }
  }
}
</script>
<style lang="scss" scoped>
.question {
  padding: 20px;
  text-align: center;
  .topdad {
    ::v-deep .el-select {
      //充满父元素（el-col）
      width: 100%;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
    .el-col-14 {
      width: 50%;
      text-align: left;
      margin-left: 11px;
    }

    .top {
      margin-bottom: 21px;
    }
  }
  .page {
    margin-top: 15px;
  }
  .red {
    color: red;
  }
}
</style>
